<template>
	<view class="news_item" v-for="(item,index) in dataList" :key="index">
		<view class="news_con">
			<tui-text color="#666" size="30" :text="item.content">
				<text style="color: #2FD7D3;font-size: 30rpx;" v-if="isNickameCon">@{{item.nickname}}</text>
			</tui-text>
			<view class="operate_icon" v-if="isOperate">
				<image src="/static/user/icon_yincang@2x.png"></image>
				<image src="/static/user/my/icon_del_red@2x.png" style="margin: 0 10rpx;" @tap="tapDelAppraise(item.id)"></image>
				<image src="/static/user/my/icon_huifu@2x.png" @tap="tapReplyAppraise(item.id)"></image>
			</view>
		</view>
		<view v-if="isStore&&item.reply">
			<tui-text color="#2FD7D3" size="30" :text="'@'+(item.reply&&item.reply.nickname)">
				<text style="color: #666;font-size: 30rpx;">回复文字</text>
			</tui-text>
			<view>
				<tui-text color="#666" size="30" :text="item.reply&&item.reply.content"></tui-text>
			</view>
		</view>
		<view class="date" :style="{justifyContent: isNickameBottom?'space-between':'flex-end'}">
			<tui-text color="#2FD7D3" size="30" :text="'@'+item.nickname" v-if="isNickameBottom"></tui-text>
			<tui-text color="#999" size="24" :text="item.commentTime"></tui-text>
		</view>
	</view>
</template> 

<script>
	export default {
		name: "NewsItem",
		emits: ['replyAppraise','delAppraise'],
		props: {
			// 数据列表
			dataList: {
				type: Array,
				default: []
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			},
			isNickameCon: {
				type: Boolean,
				default: false
			},
			isNickameBottom: {
				type: Boolean,
				default: true
			},
			isStore: {
				type: Boolean,
				default: false
			},
			isOperate: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			tapReplyAppraise(id) {
				this.$emit("replyAppraise", {
					id
				})
			},
			tapDelAppraise(id){
				this.$emit("delAppraise", {
					id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news_item {
		border-bottom: 1px solid #F5F5F5;
		padding: 50rpx 0;

		.news_con {
			display: flex;
			justify-content: space-between;

			.operate_icon image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.evalute_con {
			display: flex;
		}

		.date {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}
	}
</style>